<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏宁</title>
    <link rel="stylesheet" href="/css/shunin.css">
    <link rel="stylesheet" href="/css/swiper-3.4.2.min.css">
    <link rel="shortcut icon" href="/ico.ico">



    <style type="text/css">
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>


</head>


<body>
   
    <div class="body">
        <div id="top">
            <div class="topImg">
                <img src="/css/img/fenlei.png" alt="">
                <img src="/css/img/topad.gif" alt="" class="middle">
                <img src="/css/img/denlu.png" alt="">
            </div>
            <div class="input">
                <input type="text" placeholder="1000元深圳政府补贴">
                <svg t="1607432414580" class="icon" viewBox="0 0 1025 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="922" width="200" height="200">
                    <path
                        d="M401.271618 64.685719a335.31276 335.31276 0 1 1-126.692351 24.641081A335.55533 335.55533 0 0 1 401.271618 64.685719m0-64.685365a399.967803 399.967803 0 0 0-283.736289 117.535329c-156.659868 156.659868-156.659868 410.772281 0 567.472577a401.251404 401.251404 0 0 0 567.472577 0c156.659868-156.659868 156.659868-410.772281 0-567.472577A399.988018 399.988018 0 0 0 401.271618 0.000354z"
                        fill="#333333" p-id="923"></path>
                    <path
                        d="M625.598272 670.114812m7.14679-7.14679l31.445879-31.445879q7.146791-7.146791 14.293581 0l343.789217 343.789217q7.146791 7.146791 0 14.293581l-31.445878 31.445879q-7.146791 7.146791-14.293582 0l-343.789217-343.789217q-7.146791-7.146791 0-14.293581Z"
                        fill="#333333" p-id="924"></path>
                </svg>
            </div>
        </div>
        <div class="topFlxed">
            <div class="topImgFlxed">
                <img src="/css/img/fenlei.png" alt="">
                <div class="inputFlxed">
                    <input type="text" placeholder="1000元深圳政府补贴">
                    <svg t="1607432414580" class="icon" viewBox="0 0 1025 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="922" width="200" height="200">
                        <path
                            d="M401.271618 64.685719a335.31276 335.31276 0 1 1-126.692351 24.641081A335.55533 335.55533 0 0 1 401.271618 64.685719m0-64.685365a399.967803 399.967803 0 0 0-283.736289 117.535329c-156.659868 156.659868-156.659868 410.772281 0 567.472577a401.251404 401.251404 0 0 0 567.472577 0c156.659868-156.659868 156.659868-410.772281 0-567.472577A399.988018 399.988018 0 0 0 401.271618 0.000354z"
                            fill="#333333" p-id="923"></path>
                        <path
                            d="M625.598272 670.114812m7.14679-7.14679l31.445879-31.445879q7.146791-7.146791 14.293581 0l343.789217 343.789217q7.146791 7.146791 0 14.293581l-31.445878 31.445879q-7.146791 7.146791-14.293582 0l-343.789217-343.789217q-7.146791-7.146791 0-14.293581Z"
                            fill="#333333" p-id="924"></path>
                    </svg>
                </div>
                <img src="/css/img/denlu.png" alt="">
            </div>
        </div>
        <div class="center">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    {{each swiper item}}
                    <div class="swiper-slide"><img src={{item}} alt=""></div>
                    {{/each}}
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="middle">
                <img src="/css/img/centerMiddle1.jpg" alt="">
                <img src="/css/img/centerMiddle2.jpg" alt="">
                <img src="/css/img/centerMiddle3.jpg" alt="">
            </div>
            <div class="bottom">
                <ul>
                    {{each center item}}<li><img src={{item.img}} alt="">{{item.text}}</li>{{/each}}
                </ul>
            </div>
        </div>

        <div class="recommend">
            <img src="/css/img/recommend.png" alt="" class="topImg">
            <div class="top">
                <ul>
                    {{each recommend item}}
                    <li>
                        <img src={{item.img1}} alt="">
                        <img src={{item.img2}} alt="">
                        <span>{{item.text}}</span>
                        <span class="E244AA">{{item.activity}}</span>
                    </li>
                    {{/each}}
                </ul>
                <div class="xrdlb">
                    <img src="/css/img/recommendTop5.png" alt="">
                    <img src="/css/img/recommendTop6.png" alt="">
                    <img src="/css/img/recommendTop7.png" alt="">
                </div>
            </div>
            <div class="bottom">
                <ul>
                    {{each recommendBottom item}}
                    <li>
                        <span>{{item.text1}}</span>
                        <a href=""></a>
                        <span>{{item.text2}}</span>
                        <img src={{item.img1}} alt="">
                        <img src={{item.img2}} alt="">
                        <span>{{item.price1}}</span>
                        <span>{{item.price2}}</span>
                    </li>
                    {{/each}}
                </ul>
                <dt>
                    <dl>
                        <span>为您推荐</span>
                        <span>精选频道</span>
                    </dl>
                    {{each selected item}}
                    <dl>
                        <img src={{item.img}} alt="">
                        <span>{{item.text}}</span>
                    </dl>
                    {{/each}}
                   
                </dt>
            </div>
            <div class="bottomMiddle">
                <h6>推荐榜单</h6>
                <div class="rotation">
                    <ul>
                        <li>
                            <img src="/css/img/bottomMiddle3.png" alt="">
                            <span>人气榜</span>
                            <span>诱惑迷人唇膏</span>
                            <span>卖爆1.5万件</span>
                            <img src="/css/img/bottomMiddle1.png" alt="">
                        </li>
                    </ul>

                    <ul class="lb">
                        <li class="lbt">
                            <img src="/css/img/bottomMiddleLb1.jpg" alt="">
                            <span>人气榜</span>
                            <span>清透服帖粉底</span>
                            <span>卖爆1912件</span>
                            <img src="/css/img/bottomMiddle2.png" alt="">
                        </li>
                        <li class="lbt">
                            <img src="/css/img/bottomMiddleLb2.jpg" alt="">
                            <span>人气榜</span>
                            <span>人气热销手机</span>
                            <span>卖爆8.8万件</span>
                            <img src="/css/img/bottomMiddle2.png" alt="">
                        </li>
                        <li class="lbt">
                            <img src="/css/img/bottomMiddleLb3.jpg" alt="">
                            <span>人气榜</span>
                            <span>时尚必备电吹</span>
                            <span>卖爆9.5万件</span>
                            <img src="/css/img/bottomMiddle2.png" alt="">
                        </li>
                    </ul>

                    <ul>
                        <li>
                            <img src="/css/img/bottomMiddle4.png" alt="">
                            <span>人气榜</span>
                            <span>清洁洗发水榜</span>
                            <span>卖爆4.3万件</span>
                            <img src="/css/img/bottomMiddle1.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="bottom">
                <ul>
                    {{each bottom item}}
                    <li>
                        <span>{{item.text}}</span>
                        <a>{{item.list}}</a>
                        <span>{{item.salesVolume}}</span>
                        <img src={{item.img1}} alt="">
                        <img src={{item.img2}} alt="">
                    </li>
                    {{/each}}
                </ul>
            </div>
            <div class="bottomFixed">
                <ul>
                    {{each bottomFixed item}}
                    <li><img src={{item.img}} alt="">{{item.text}}</li>
                    {{/each}}
                </ul>
            </div>
        </div>
        <div class="return">
            ^
        </div>
    </div>


</body>
<script src="/js/jquery-3.5.1.js"></script>
<script src="/js/swiper-3.4.2.min.js"></script>
<script language="javascript">
    var mySwiper = new Swiper('.swiper-container', {
        effect: 'cube',

        cubeEffect: {
            slideShadows: true,
            shadow: true,
            shadowOffset: 100,
            shadowScale: 0.6
        },
    })
    var num = 0, num1 = -1;
    setInterval(function () {
        $(".lbt")[num++].style.display = "block";
        if (num >= 3) {
            num = 0;
        }
        $(".lbt")[num1++].style.display = "none";
        if (num1 >= 3) {
            num1 = 0;
        }
    }, 3000);


    onscroll = function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//document.documentElement是文档对象根节点(html)的引用||意为或者，&&意为并且
        if (scrollTop > 1100) {
            $(".topFlxed")[0].style.display = "block";
            $(".return")[0].style.display = "block";
        }
        else {
            $(".topFlxed")[0].style.display = "none";
            $(".return")[0].style.display = "none";
        }
        $(".return")[0].onclick = function () {
            scrollTo(0, 0)
        }
    }
</script>

</html>